<template lang="">
    <div class="main">
        <van-nav-bar title="编辑标签成员" />
        <div class="tag-name" @click="editTag">
            <div class="tag-title">标签名字</div>
            <van-field v-model="name" readonly  placeholder="请输入标签名字" />
        </div>
        <div class="tag-name">
            <div class="tag-title">标签成员(10)</div>
            <div class="add-tag" @click="addDangAn">添加居民</div>
        </div>
 
        <van-index-bar class="list">
         <view class="item">
            <van-index-anchor index="A" />
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
         </view>

         <view class="item">
            <van-index-anchor index="B" />
            <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
         </view>
         </van-index-bar>
    </div>
</template>
<script>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getItem, getItemCate, addItemCate } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        const createTag =  () => {
            router.push("/TagCreate")
        }
        const editTag = () => {
            router.push("/TagName")
        }
        const name = ref("高血压")
        return {
            createTag,
            editTag,
            name
        }
    }
}
</script>
<style scoped>
.main{
    background: #F5F7FB;
    height: 100vh;
}
.add-tag{
    color: #49B9AD;
    font-weight: 250;
    font-size: 16px;
    padding: 15px;
    background: #FFFFFF;
}
.tag-name{
    background: #FFFFFF;
    padding: 15px;
    border-bottom: 1px solid #E3E4E5;
}
.tag-title{
    font-size: 16px;
    font-weight: 250;
    padding-left: 15px;
}

.family {
   background: #FFFFFF;
   padding: 12px;

   display: flex;
   flex-direction: row;
   align-items: center;
}

.img {
   margin-right: 15px;
}

.family-top {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.name {
   font-size: 17px;
   margin-right: 10px;
   color: #1C2023;
   font-weight: 250;
}

.age {
   font-size: 14px;

}

.tag-list {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
}

.tag {
   border: 1px solid #49B9AD;
   background: #EAFEFA;
   border-radius: 10px;
   padding: 2px 8px;
   margin-right: 10px;
   font-size: 13px;
}
</style>